<template>
  <div class="_wz_safeProduction">
    <!--    左边-->
    <div class="_wz_safeProduction_left">
<!--      <span class="_wz_borderAnimation"></span><span class="_wz_borderAnimation"></span><span class="_wz_borderAnimation"></span><span class="_wz_borderAnimation"></span>-->
      <div class="_wz_safeProduction_left_list" style="margin-bottom: 10px;">
        <div style="height: 64px;position: relative;text-align: center">
          <div class="smallDiv" style="height: 24px;width: 74px;position: absolute">今日总里程</div>
          <div style="position: absolute;right: 10px;top: 10px">
            <Icon style="cursor: pointer" type="md-sync" @click="refresh" />
          </div>
          <CountUp :end="kilometres"  v-font="50" style="font-family:'Barlow-Medium1';margin-top: 0px" /><span>公里</span>
        </div>
        <div style="display: flex;justify-content: center;align-items:center;height: 160px;">
          <img src="@/assets/opera/icon_05.png" alt="" width="74" style="margin-top: 10px">
          <div style="margin-left:20px;text-align: center">
            <CountUp :end="realTimeData && realTimeData.vehicleCount?realTimeData.vehicleCount:0"  v-font="44" style="font-family:'Barlow-Medium1';margin-top: 0px" /><span>辆</span>
            <div style="color: white">车辆总数</div>
          </div>
        </div>
        <div style="height: 64px;display: flex;justify-content: space-around">
          <div class="icon">
            <div style="height: 100%;">
              <div>普货运输</div>
              <CountUp :end="carTypeData && carTypeData.普货运输?carTypeData.普货运输:0"  v-font="26" style="font-family:'Barlow-Medium1';margin-top: 0px" /><span>辆</span>
            </div>
          </div>
          <div class="icon">
            <div style="height: 100%;">
              <div>危货运输</div>
              <CountUp :end="carTypeData && carTypeData.危货运输?carTypeData.危货运输:0"  v-font="26" style="font-family:'Barlow-Medium1';margin-top: 0px" /><span>辆</span>
            </div>
          </div>
          <div class="icon">
            <div style="height: 100%;">
              <div>客运运输</div>
              <CountUp :end="carTypeData && carTypeData.旅客运输?carTypeData.旅客运输:0"  v-font="26" style="font-family:'Barlow-Medium1';margin-top: 0px" /><span>辆</span>
            </div>
          </div>
        </div>
        <div style="height:200px;display: flex">
          <div style="width: 50%;height: 100%;display: flex;align-items: center;justify-content: center;position: relative">
            <img class="echartsImg" src="@/assets/opera/icon_06.png" alt="" style="position: absolute" width="140">
            <div style="width: 50%;display: flex;flex-direction: column;justify-content: center;align-items: center;z-index: 66">
              <div>实时在线</div>
              <div>
                <CountUp :end="realTimeData.positionOnlineVehicleNum"  v-font="26" style="font-family:'Barlow-Medium1';margin-top: 0px" />
                <span> 辆</span>
              </div>
             </div>
          </div>
          <div style="width: 50%;height: 100%;display: flex;align-items: center;justify-content: center;position: relative">
            <img class="echartsImg" src="@/assets/opera/icon_07.png" alt="" style="position: absolute" width="140">
            <div style="width: 50%;display: flex;flex-direction: column;justify-content: center;align-items: center;z-index: 66">
              <div>今日上线</div>
              <div>
                <CountUp :end="realTimeData.positionOperateVehicleNum" v-font="26" style="font-family:'Barlow-Medium1';margin-top: 0px" />
                <span> 辆</span>
              </div>
            </div>
          </div>
        </div>
        <div style="height: 140px;">
          <div style="height: 100%;text-align: center;display: flex;justify-content: space-around">
            <div >
              <CountUp :end="realTimeData.positionOnlineVehicleRate" v-font="50" style="font-family:'Barlow-Medium1';" /><span>%</span>
              <div>实时在线率</div>
            </div>
            <div >
              <CountUp :end="realTimeData.positionOperateVehicleRate" v-font="50" style="font-family:'Barlow-Medium1';" /><span>%</span>
              <div>今日上线率</div>
            </div>
          </div>
        </div>
        <div class="title-top">
          <div style="display: flex;position: absolute;top: 6px; left: 10px">
            <img src="@/assets/opera/title01.png" alt="" width="13" >
            <div style="font-size: 18px;margin: 4px 0 0 10px;">车辆接入率</div>
          </div>
          <div class="title01"></div>
          <div class="title02"></div>
          <div class="title03"></div>
        </div>
        <div style="height: calc(100% - 140px - 200px - 64px - 160px - 64px - 46px);padding: 15px">
          <div style="height: 100%;display: flex;">
            <div class="netIn-png" style="width: 50%;display: flex;flex-direction: column;align-items: center;">
              <div style="font-size: 36px;font-family:'Barlow-Medium1';margin-top: 30px">{{ realTimeData.vehicleInternetRate  }}  <span style="font-size: 14px"> %</span> </div>
            </div>
            <div style="width: 50%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
              <div>
                <CountUp :end="realTimeData.vehicleInternetCount" v-font="40" style="font-family:'Barlow-Medium1';" /><span>辆</span>
              </div>
              <div>入网数</div>
            </div>
          </div>
<!--          <div style="height: 100%;width: 100%;" :id="operatingData.id"></div>-->
        </div>
      </div>
<!--      <div class="_wz_safeProduction_left_list"></div>-->
    </div>
    <!--    中间-->
    <div class="_wz_safeProduction_middle">
      <div class="_wz_safeProduction_middle_left">
        <div class="_wz_safeProduction_middle_left_li">
          <div class="title-top">
            <div style="display: flex;position: absolute;top: 6px; left: 10px">
              <img src="@/assets/opera/title01.png" alt="" width="13" >
              <div style="font-size: 18px;margin: 4px 0 0 10px;">各乡镇接入率排名</div>
            </div>
            <div class="title01"></div>
            <div class="title02"></div>
            <div class="title03"></div>
          </div>
          <div style="height: calc(100% - 46px)">
            <div class="left-table">
              <div class="table-li table-title" style="height: 48px">
                <div style="height: 100%;display: flex;">
                  <div class="table-li-01" style="width: 80px">排名</div>
                  <div class="table-li-01" style="width: 100px;">乡镇</div>
                  <div class="table-li-01">车辆总数</div>
                  <div class="table-li-01">接入率</div>
                  <div class="table-li-01">上线率</div>
                  <div class="table-li-01">未上线</div>
                </div>
                <img src="@/assets/opera/itembg-title.png" alt="" width="100%" height="48px" style="position: absolute;top: 0">
              </div>
              <div style="height: calc(100% - 58px);overflow: hidden">
                <vue3-seamless-scroll  hover-stop="true" :list="countyList" hover="true" step="0.3">
                  <div v-for="(item,index) in countyList" class="table-li"  :class="index < 4? `table-bg${index}`:'table-bg3'">
                    <div class="table-hover" style="height: 100%;display: flex;align-items: center;justify-content: space-around;" @click="getTableInfo(item)">
                      <div class="table-li-01" style="width: 80px">
                        <div class="listItemTopl" :class="index < 3?`top${index}`:'top3'">{{  index + 1}}</div>
                      </div>
                      <div class="table-li-01" style="width: 100px;">{{ item.townsName }}</div>
                      <div class="table-li-01" style="justify-content: left;padding-left: 10px">{{ item.vehicleCount }}</div>
                      <div class="table-li-01" style="justify-content: left;padding-left: 10px">{{(item.vehicleInternetCount / item.vehicleCount * 100).toFixed(2)}}%</div>
                      <div class="table-li-01" style="justify-content: left;padding-left: 10px">{{item.positionOperateVehicleRate}}%</div>
                      <div class="table-li-01" style="justify-content: left;padding-left: 10px">{{item.vehicleCount - item.positionOperateVehicleNum}}</div>
                    </div>
                  </div>
                </vue3-seamless-scroll>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="_wz_safeProduction_middle_right">
        <div class="title-top">
          <div style="display: flex;position: absolute;top: 6px; left: 10px">
            <img src="@/assets/opera/title01.png" alt="" width="13" >
            <div style="font-size: 18px;margin: 4px 0 0 10px;">各乡镇经营企业排名</div>
          </div>
          <div class="title01"></div>
          <div class="title02"></div>
          <div class="title03"></div>
        </div>
        <div class="table">
          <div class="table-li">
            <div style="height: 100%;display: flex;">
              <div class="table-li-01" style="width: 80px">排名</div>
              <div class="table-li-01" style="width: 180px">经营企业</div>
              <div class="table-li-01" >车辆总数</div>
              <div class="table-li-01" >今日上线车辆</div>
              <div class="table-li-01" >上线率</div>
              <div class="table-li-01" >未上线</div>
            </div>
            <img src="@/assets/opera/itembg-title.png" alt="" width="100%" height="48px" style="position: absolute;top: 0">
          </div>
          <div style="height: calc(100% - 48px);">
            <Carousel style="height: 100%;" dots="none"  trigger="hover" autoplay :autoplay-speed="5000" >
              <CarouselItem style="height: 100%;" v-for="(item,index) in deptList">
                <TransitionGroup tag="div" name="fade">
                  <template v-for="(childItem,childIndex) in item">
                    <div v-if="index < 15" class="table-li table-hover" :class="countdown == (index * 15 + childIndex) ?'hover-bg':''" style="display: flex;" :key="item" @click="getTableInfo(childItem)">
                      <div class="table-li-01" style="width: 80px">
                        <div class="listItemTopl" :class="(index * 15 + childIndex) < 3?`top${index * 15 + childIndex}`:'top3'">{{ index * 15 + 1 + childIndex }}</div>
                      </div>
                      <div class="table-li-01" style="text-align: center;width: 200px">{{childItem && childItem.companyName?childItem.companyName:'' }}</div>
                      <div class="table-li-01" style="justify-content: left;padding-left: 20px">{{ childItem && childItem.vehicleCount?childItem.vehicleCount:0 }}</div>
                      <div class="table-li-01" style="justify-content: left;padding-left: 20px">{{ childItem && childItem.positionOperateVehicleNum? childItem.positionOperateVehicleNum:0}}</div>
                      <div class="table-li-01" style="justify-content: left;padding-left: 36px">{{ childItem && childItem.positionOperateVehicleRate? childItem.positionOperateVehicleRate + '%':0}}</div>
                      <div class="table-li-01" style="justify-content: left;padding-left: 36px">{{ childItem && childItem.positionOperateVehicleNum?childItem.vehicleCount - childItem.positionOperateVehicleNum:0}}</div>
                    </div>
                  </template>
                </TransitionGroup>
              </CarouselItem>
            </Carousel>
          </div>
        </div>
      </div>
    </div>
    <!--    右边-->
    <div class="_wz_safeProduction_right">
      <div class="_wz_safeProduction_right_list" style="margin-bottom: 10px;">
        <div class="title-top">
          <div style="display: flex;position: absolute;top: 6px; left: 10px">
            <img src="@/assets/opera/title01.png" alt="" width="13" >
            <div style="font-size: 18px;margin: 4px 0 0 10px;">营运统计</div>
          </div>
          <div class="title01"></div>
          <div class="title02"></div>
          <div class="title03"></div>
        </div>
        <div style="height: calc(100% - 46px);width: 100%" >
          <div style="height: 100px;text-align: center;padding-top: 10px;color: white;">
            <div style="font-size: 38px;font-family:'Barlow-Medium1'">{{onlineRate?onlineRate:0}}%</div>
            <div style="font-size: 18px;">本月在线率</div>
          </div>
          <div style="display: flex;height: 100%">
            <div class="base-png">
              <div style="font-size: 36px;color: white;font-family:'Barlow-Medium1'">{{operate[1]?operate[1]:0}} <span style="font-size: 16px">辆</span></div>
              <div style="font-size: 18px;color: white;margin-top: -5px">{{ '已营运' }}</div>
            </div>
            <div class="base-png">
              <div style="font-size: 36px;color: white;font-family:'Barlow-Medium1'">{{operate[2]?operate[2]:0}} <span style="font-size: 16px"> 辆</span></div>
              <div style="font-size: 18px;color: white;margin-top: -5px">{{ '非营运' }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="_wz_safeProduction_right_list" style="margin-bottom: 10px;">
        <div class="title-top">
          <div style="display: flex;position: absolute;top: 6px; left: 10px">
            <img src="@/assets/opera/title01.png" alt="" width="13" >
            <div style="font-size: 18px;margin: 4px 0 0 10px;">{{ '近7天在线率' }}</div>
          </div>
          <div class="title01"></div>
          <div class="title02"></div>
          <div class="title03"></div>
        </div>
        <div style="height: calc(100% - 46px);width: 100%" :id="enrollmentRateId "></div>
      </div>
      <div class="_wz_safeProduction_right_list">
        <div class="title-top">
          <div style="display: flex;position: absolute;top: 6px; left: 10px">
            <img src="@/assets/opera/title01.png" alt="" width="13" >
            <div style="font-size: 18px;margin: 4px 0 0 10px;">{{ townNowData.name }}</div>
          </div>
          <div class="title01"></div>
          <div class="title02"></div>
          <div class="title03"></div>
        </div>
        <div style="height: calc(100% - 46px);width: 100%" :id="lightId"></div>
      </div>
    </div>
    <modulePage ref="moduleRef" :columnarData="operatingData"></modulePage>
    <modalPage v-if="propType" :propData="tableInfoData" @closeFun="closeFun" style="position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 66;background: rgba(0,0,0,0.7)"></modalPage>
  </div>
</template>
<script setup>
import modulePage from './modulePage.vue'
import modalPage from './modalPage.vue'
import gsap from 'gsap'
import {inject, ref, onMounted, computed, reactive, onBeforeUnmount} from 'vue'
const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
const $echarts = inject('$echarts');// 变量全局化 echarts
import 'echarts-liquidfill/src/liquidFill.js'; //在这里引入
const $common = inject('$common');//自己封装的方法
const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
const $axios = inject('$axiosInterceptor');// 变量全局化 axios
const moduleRef = ref()
const countdown = ref(0)
const expire = ref(false) // 定时

const enrollmentRateId = ref('enrollmentRate') // 统计图
const lightId = ref('light') // 统计图

const kilometres = ref(0)




const propType = ref(false) //弹窗
const carTypeData = ref({}) //车辆类型
const operate = ref({}) //营运状态统计
const onlineRate = ref(null) //本月在线率
const nearlyOnlineData = ref({}) //近15天在线率
const townNowData = ref({}) //各乡镇本月在线率
const countyList = ref([])

const deptCapacity = ref([]) // 运力
const realTimeData = reactive({
    vehicleCount:0,
    vehicleInternetRate:0,
    vehicleInternetCount:0,
    positionOperateVehicleNum:0,
    positionOnlineVehicleNum:0,
    positionOperateVehicleRate:0,
    positionOnlineVehicleRate:0,
}) // 实时数据
const deptList = ref([])
const baseDeptList = ref([])

const operatingData = ref(
    { //上线率
      id:'operating',
      dataList:[
        {name:'04月',value:0,},
        {name:'05月',value:0,},
        {name:'06月',value:58.05,},
        {name:'07月',value:65.23,},
        {name:'08月',value:65.53,},
        {name:'09月',value:71.56,},
      ],
    }
)

// setInterval(() => {
//   //根据数组长度获取 要变化的个数
//   let number = Math.floor(Math.random() * dataList.value.length);
//   for (let i = 0; i < number; i++) {
//     //需要变化的数组Index
//     let index = Math.floor(Math.random() * dataList.value.length);
//     //需要变化的数组的里程数
//     let randomMileage = randomChangeMileage(20,800);
//     dataList.value[index].mileage = dataList.value[index].mileage + randomMileage
//
//     dataList.value = dataList.value.sort(function (a, b) {
//       return b.mileage - a.mileage; //降序排序
//       // return a - b; //升序排序
//     });
//   }
// },6000)



const randomChangeMileage = (min, max) => {
  return Math.floor(Math.random() * (max - min + 1) ) + min;
}



// const conversionData = ref({}) //暂时不用了
const authCode = () =>{
  if (countdown.value == 126) {
    countdown.value = 0;
  }
  expire.value = setTimeout(function () {
    // conversionData.value = baseDeptList.value[countdown.value]
    ++countdown.value
    authCode()
    // kilometres.value = kilometres.value + randomChangeMileage(20,300)
    // getDeptCapacity() // 高亮数据 查询 今日里程表 暂时不用了
  }, 6000);
}

const getTableData = (item,index,childIndex) => { // 点击表格 切换数据
  countdown.value = index * 15 + childIndex
  // conversionData.value = item
  // getDeptCapacity() //暂时不用了
}

const tableInfoData = ref({})
const getTableInfo = (item) => {
  tableInfoData.value = item
  propType.value = true
}
const closeFun = (item) => {
  propType.value = false
}

// const getDeptCapacity = () => {
//   if (!conversionData.value) return false
//   var data = {
//     companyName:conversionData.value.companyName,
//     operateStartDate:$common.timeFormatting(new Date(new Date().getTime() - 7 * 1000 * 60 * 60 * 24), 'yyyy-MM-dd'),
//     operateEndDate:$common.timeFormatting(new Date(), 'yyyy-MM-dd'),
//   }
//   $axios.post(apiUrl.supervisoryCollectOperateDeptPageList, data).then((res) => {
//     if (res){
//       deptCapacity.value = res.data.data
//
//       var data = {name:[],value:[],value2:[]}
//
//       deptCapacity.value.forEach(item => {
//         data.name.push(item.operateDate)
//         data.value.push(item.operateMileageAvNum)
//         data.value2.push(item.operateOnlineRate)
//       })
//
//       moduleRef.value.line({id:'enrollmentRate',data:data})
//       moduleRef.value.lightSpot({id:'light',data:data})
//
//     }
//   })
// }


const getRealTimeData = () => {  // 实时数据
  $axios.post(apiUrl.subjectVehicleRealTimeDataStatistics, {}).then((res) => {
    if (res){
      let info = res.data.data.value?res.data.data.value:{}
      realTimeData.vehicleCount = info.vehicleCount
      realTimeData.vehicleInternetCount = info.vehicleInternetCount
      realTimeData.vehicleInternetRate = info.vehicleInternetRate
      realTimeData.positionOnlineVehicleNum = info.positionOnlineVehicleNum
      realTimeData.positionOperateVehicleNum = info.positionOperateVehicleNum
      realTimeData.positionOperateVehicleRate = parseInt(info.positionOperateVehicleRate)
      realTimeData.positionOnlineVehicleRate = parseInt(info.positionOnlineVehicleRate)
      kilometres.value = info.positionOperateVehicleMileage
    }
  })
}

const getTownsData = () => {  // 乡镇排名
  var data = {page:1, limit:9999,}
  $axios.post(apiUrl.subjectVehicleRealTimeTownAccessRateRanking, data).then((res) => {
    if (res){
      let info = res.data.data.value
      info = info.sort(function (a, b) {
        return (b.vehicleInternetCount / b.vehicleCount * 100) - (a.vehicleInternetCount / a.vehicleCount * 100); //降序排序
        // return a - b; //升序排序
      });
      countyList.value = info
    }
  })
}

const getCarTypeData = () => {  // 车辆分类
  $axios.post(apiUrl.subjectVehicleVehicleOperateTypeStatistics, {}).then((res) => {
    if (res){
      let info = res.data.data
      carTypeData.value = info[0].value // 车辆经营类型统计
      operate.value = info[1].value // 营运状态统计
      onlineRate.value = info[2].value.toFixed(2) // 本月在线率
    }
  })
}


const getDeptList = () => {
  var data = {page:1, limit:9999,}
  $axios.post(apiUrl.subjectVehicleRealTimeTownCompanyOperateRanking, data).then((res) => {
      if (res){
        let list = res.data.data.value
        list = list.sort(function (a, b) {
          return b.positionOperateVehicleRate - a.positionOperateVehicleRate; //降序排序
          // return a - b; //升序排序
        });

        baseDeptList.value = list

        //处理数据对数据进行分页
        if(list.length > 0 && list.length <= 15){
          deptList.value = [list]
        }else if(list.length > 0 && list.length > 15){
          let dataList = []
          let childList = []
          list.forEach((item,index) => {
            if(childList.length == 15 || index == list.length - 1){
              dataList.push([...childList])
              childList = []
              childList.push(item)
            }else{
              childList.push(item)
            }
          })
          deptList.value = dataList
        }

        // conversionData.value = baseDeptList.value[0] //暂时不用
        // getDeptCapacity() //暂时不用
      }
  })
}

const getOnlineRate = () => {  // 近十五天每日在线率
  var data = {
    operateStartDate:$common.timeFormatting(new Date(new Date().getTime() - 7 * 1000 * 60 * 60 * 24), 'yyyy-MM-dd'),
    operateEndDate:$common.timeFormatting(new Date(new Date().getTime() - 1 * 1000 * 60 * 60 * 24), 'yyyy-MM-dd'),
  }
  $axios.post(apiUrl.subjectVehicleOnlineRateFifteenDaysStatistics, data).then((res) => {
    if (res){
      let info = res.data.data
      nearlyOnlineData.value = info
      moduleRef.value.lightSpot({id:'enrollmentRate',data:info.value})
    }
  })
}

const getTownNowData = () => {  // 各乡镇本月在线率

  $axios.post(apiUrl.subjectVehicleTownNowMonthOnlineRate, {}).then((res) => {
    if (res){
      let info = res.data.data
      townNowData.value = info
      moduleRef.value.line({id:'light',data:info.value})
    }
  })
}

const refresh = () => {  // 刷新

  $ViewUIPlus.Modal.confirm({
    title: '刷新提醒',
    content: '确定要刷新数据？',
    onOk: () => {
      $axios.post(apiUrl.subjectVehicleCollectRealSummary, {}).then((res) => {
        if (res){
          $ViewUIPlus.Message.success('刷新成功');
        }
      })
    },
    onCancel: () => {
      //点击取消
    }
  });
}

const setTime = ref(false)
setTime.value = setInterval(() => {
  // getDeptList()
  // getRealTimeData() //实时数据
  // getTownsData() //实时数据
},1200000)


// clearInterval(setTime.value) // 清除定时
onMounted(()=>{

  getDeptList()
  getRealTimeData() //实时数据
  authCode() // 表格滚动出发
  getTownsData() //
  getCarTypeData() //车辆类型
  getOnlineRate() //在线率数组
  getTownNowData() //各乡镇本月在线率




  // moduleRef.value.columnar()
  // moduleRef.value.water({id:'mychart', value:75})
  // moduleRef.value.water({id:'mychart1', value:32})
  // moduleRef.value.testOneChart({id:'testOne', value:32})
  // moduleRef.value.area({id:'areaId',value:32})
  // moduleRef.value.camber({id:'camberId',value:32}) 弧形
})

onBeforeUnmount(() => {
  clearInterval(setTime.value) // 清除定时
})


</script>
<style lang="less">
._wz_safeProduction{
  position: relative;
  height: 100%;
  overflow: hidden;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  .title-top{
    display: flex;
    align-items: flex-end;
    position: relative;
    color: white;
    width: 100%;
    height: 46px;
    .title01{
      width: 40px;
      height: 3px;
      background: #0086FF;
      border-radius: 0;
      opacity: 1;
    }
    .title02{
      width: calc(100% - 40px - 64px);
      height: 0.01563rem;
      background: #083566;
      border-radius: 0;
      opacity: 1;
      margin-bottom: 1px;
    }
    .title03{
      height: 100%;
      width: 64px;
      background: url("@/assets/opera/title02.png") no-repeat 50% 100%;
      background-size: 40px;
    }
  }

  .left-table{
    height: 100%;
    color: white;
    overflow: hidden;
    font-size: 16px;
    margin-top: 10px;
    .table-li{
      height: 56px;
      &.table-title{
        position: relative;
      }
      &.table-bg0{
        background: url("@/assets/opera/itembg0.png") no-repeat 100% 100%;
        background-size: 100%;
      }
      &.table-bg1{
        background: url("@/assets/opera/itembg1.png") no-repeat 100% 100%;
        background-size: 100%;
      }
      &.table-bg2{
        background: url("@/assets/opera/itembg2.png") no-repeat 100% 100%;
        background-size: 100%;
      }
      &.table-bg3{
        background: url("@/assets/opera/itembg3.png") no-repeat 100% 100%;
        background-size: 100%;
      }
      .table-li-01{
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc((100% - 100px) / 4);
      }
      .listItemTopl{
        width: 26px;
        height: 26px;
        font-size: 15px;
        font-weight: 700;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .top0{
        border: 1px solid;
        background:linear-gradient(45deg,#D9A320,#FFD571);
        border-image: linear-gradient(45deg,#FFD571,#D9A320) 1 1;
      }
      .top1{
        border: 1px solid;
        background: linear-gradient(45deg,#9A6642,#C89181);
        border-image: linear-gradient(45deg,#C89181,#9A6642) 1 1;
      }
      .top2{
        border: 1px solid;
        background: linear-gradient(45deg,#71CCC4,#12A5B6);
        border-image: linear-gradient(45deg,#71CCC4,#12A5B6) 1 1;
      }
      .top3{
        border: 1px solid;
        background: linear-gradient(45deg, #2C76BA, #779EBC);
        border-image: linear-gradient(45deg, #779EBC, #2C76BA) 1 1;
      }
      .table-hover:hover{
        background: rgba(30, 159, 255, 0.35);
      }
    }

  }

  ._wz_safeProduction_left{
    width: 350px;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: rgba(0,0,0,0.6);
    ._wz_safeProduction_left_list{
      height: 100%;
      //height: calc((100% - 10px) / 2);
      //background: rgba(0,0,0,0.6);
      .netIn-png{
        background: url("@/assets/opera/base03.png") no-repeat 100% 50%;
        background-size: 180px;
      }
      color: white;
      .smallDiv{
        text-align: center;
        line-height: 24px;
        border-radius: 0 0 12px 0;
        font-size: 12px;
        //border: 1px solid ;
        background: linear-gradient(45deg,#71CCC499,#12A5B649);
        border-image: linear-gradient(45deg,#71CCC4,#12A5B6) 1 1;
      }
      .echartsImg {
        animation: spin 3s linear infinite;
      }
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      .icon{
        display: flex;
        justify-content: center;
        width: calc(100% / 3);
      }
    }
  }
  ._wz_safeProduction_middle{
    width: calc(100% - 350px - 450px - 20px);
    height: 100%;
    display: flex;
    justify-content: space-between;
    ._wz_safeProduction_middle_left{
      width: 430px;
      height: 100%;

      ._wz_safeProduction_middle_left_li{
        background: rgba(0,0,0,0.6);
        //height: calc((100% - 10px) / 2);
        height: 100%;
      }
    }
    ._wz_safeProduction_middle_right{
      height: 100%;
      width: calc(100% - 430px - 10px);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background: rgba(0,0,0,0.6);
    }
    .table {
      width: 100%;
      color: white;
      position: relative;
      margin-top: 10px;
      height: calc(100% - 56px);
      overflow: hidden;
      .table-li{
        height: 50.3px;
        .table-li-01{
          height: 100%;
          display: flex;
          font-size: 16px;
          align-items: center;
          justify-content: center;
          width: calc((100% - 80px - 170px) / 3);
        }
        .listItemTopl{
          width: 26px;
          height: 26px;
          font-size: 15px;
          font-weight: 700;
          color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .top0{
          border: 1px solid;
          background:linear-gradient(45deg,#D9A320,#FFD571);
          border-image: linear-gradient(45deg,#FFD571,#D9A320) 1 1;
        }
        .top1{
          border: 1px solid;
          background: linear-gradient(45deg,#9A6642,#C89181);
          border-image: linear-gradient(45deg,#C89181,#9A6642) 1 1;
        }
        .top2{
          border: 1px solid;
          background: linear-gradient(45deg,#71CCC4,#12A5B6);
          border-image: linear-gradient(45deg,#71CCC4,#12A5B6) 1 1;
        }
        .top3{
          border: 1px solid;
          background: linear-gradient(45deg, #2C76BA, #779EBC);
          border-image: linear-gradient(45deg, #779EBC, #2C76BA) 1 1;
        }
      }
      .hover-bg{
        background: rgba(30, 159, 255, 0.35);
      }
      .table-hover{
        border-bottom: 1px solid #096c79;
      }
      .table-hover:hover{
        background: rgba(30, 159, 255, 0.35);
      }
    }
  }
  ._wz_safeProduction_right{
    width: 450px;
    height: 100%;
    ._wz_safeProduction_right_list{
      height: calc((100% - 20px) / 3);
      background: rgba(0,0,0,0.6);
      .base-png{
        height: calc(100% - 100px);
        text-align: center;
        width: 50%;
        //background: red;
        background: url("@/assets/opera/base02.png") no-repeat 50% ;
        background-size:180px;
      }
    }
  }
  ._wz_borderAnimation:nth-child(1) {
    position: absolute;
    display: block;
    filter: hue-rotate(0deg);
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #3a86ff);
    animation: animate1 2s linear infinite;
  }
  @keyframes animate1 {
    0% {
      left: -100%;
    }
    50%,
    100% {
      left: 100%;
    }
  }
  ._wz_borderAnimation:nth-child(2) {
    position: absolute;
    display: block;
    filter: hue-rotate(60deg);
    top: -100%;
    right: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, transparent, #3a86ff);
    animation: animate2 2s linear infinite;
    animation-delay: 1.5s;
  }
  @keyframes animate2 {
    0% {
      top: -100%;
    }
    50%,
    100% {
      top: 100%;
    }
  }
  ._wz_borderAnimation:nth-child(3) {
    position: absolute;
    display: block;
    filter: hue-rotate(120deg);
    bottom: 0;
    right: 0;
    width: 100%;
    background: linear-gradient(270deg, transparent, #3a86ff);
    animation: animate3 2s linear infinite;
    animation-delay: 1.5s;
  }
  @keyframes animate3 {
    0% {
      right: -100%;
      height: 3px;
    }
    50%,
    100% {
      height: 2px;
      right: 100%;
    }
  }
  ._wz_borderAnimation:nth-child(4) {
    position: absolute;
    display: block;
    filter: hue-rotate(300deg);
    bottom: -100%;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(360deg, transparent, #3a86ff);
    animation: animate4 2s linear infinite;
    animation-delay: 1.75s;
  }
  @keyframes animate4 {
    0% {
      bottom: -100%;
    }
    50%,
    100% {
      bottom: 100%;
    }
  }
}

/* 1. 声明过渡效果 */
.fade-move,
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}

/* 2. 声明进入和离开的状态 */
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: scaleY(0.01) translate(30px, 0);
}

/* 3. 确保离开的项目被移除出了布局流
      以便正确地计算移动时的动画效果。 */
.fade-leave-active {
  position: absolute;
}
</style>